<template>
	<view>
		<view class="page-index" :class="{'bgf':navIndex >0}">
			<!-- #ifdef H5 -->
			<view class="header">
				<view class="serch-wrapper flex">
					<view class="logo">
						<image :src="logoUrl" mode=""></image>
					</view>
					<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
							class="iconfont icon-xiazai5"></text>
						搜索店铺</navigator>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<!-- <view class="mp-header">
				<view class="sys-head" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="sys-title">宠星球club</view>
			</view> -->
			<top :isPhoneBox='isPhoneBox' :title='title'></top>
			<view :class="isPhoneBox?'serch-box hidden':'serch-box'" :style="{marginTop: topHeight + 'px'}">
				<view class="serch-wrapper flex-b flex-a">
					<view class="address flex-a" @click="getAddress()">
						<uni-icons type="location-filled" size="20"
							style="position: relative;bottom: -3rpx;"></uni-icons>
						<text>{{address}}</text>
						<uni-icons type="forward" size="15" color="#999"
							style="position: relative;bottom: -6rpx;"></uni-icons>
					</view>
					<view class="tip">同城1小时达</view>
				</view>
				<navigator url="/pages/goods_search/index" class="input" hover-class="none">
					搜索店铺<text class="iconfont icon-xiazai5"></text></navigator>
			</view>
			<!-- <view class='star' v-if="stores.length">
				<view class="item" v-for="(item,index) in stores" :key="index">
					<navigator v-if="item.show == '1'" :url='"/pages/store/index?storeNo="+item.storeNo'
						open-type='switchTab' hover-class='none'>
						<view class='pictrue'>
							<image :src='item.storeLogo' mode="widthFix"></image>
						</view>
						<view class="name">{{item.storeName}}</view>
					</navigator>
					<navigator v-else :url='"/pages/store/index?storeNo="+item.storeNo' hover-class='none'>
						<view class='pictrue'>
							<image :src='item.storeLogo' mode="widthFix"></image>
						</view>
						<view class="name">{{item.storeName}}</view>
					</navigator>
				</view>
			</view> -->
			<!-- #endif -->
			<!-- 首页展示 -->
			<view class="page_content" v-if="navIndex == 0">
				<!-- banner -->
				<view :class="isPhoneBox?'swiper hidden':'swiper'">
					<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
						:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'
									hover-class='none'>
									<image :src="item.pic" class="slide-image" lazy-load></image>
								</navigator>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<!-- 商品分类 -->
				<view class='nav acea-row' v-if="menus.length">
					<block v-for="(item,index) in menus" :key="index" class="item">
						<navigator class='item' v-if="item.show == '1'" :url='item.url' open-type='switchTab'
							hover-class='none'>
							<view class='pictrue'>
								<image :src='item.pic'></image>
							</view>
							<view class="menu-txt">{{item.name}}</view>
						</navigator>
						<navigator class='item' v-else :url='item.url' hover-class='none'>
							<view class='pictrue'>
								<image :src='item.pic'></image>
							</view>
							<view class="menu-txt">{{item.name}}</view>
						</navigator>
					</block>
				</view>
				<view class="tab-nav flex">
					<view class="active">附近商家</view>
				</view>
				<!-- 首发新品 -->
				<view class="index-product-wrapper" :class="iSshowH?'on':''">
					<view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
						<!-- <view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
							<view class="pictrue">
								<span class="pictrue_log pictrue_log_class">秒杀</span>
								<span class="pictrue_log pictrue_log_class">砍价</span>
								<span class="pictrue_log pictrue_log_class">拼团</span>
								<image :src="item.img" mode="widthFix"></image>
							</view>
							<view class="text-info">
								<view class="title line1">{{item.des}}</view>
								<view class="flex-b">
									<view class="old-price"><text>¥{{item.old}}</text></view>
									<view class="price">
										<text>￥</text>{{item.price}}
									</view>
								</view>
							</view>
						</view> -->
						<view class="nearby-store">
							<view class="buiness flex-a" v-for="(item,index) in business" :key="index"
								@click="toStore(item)">
								<view class="left">
									<image :src="item.storeLogo" style="width: 150rpx;margin-top: 25%;" mode="widthFix">
									</image>
								</view>
								<view class="right">
									<view class="title flex-b">
										<view class="name">{{item.storeName}}</view>
										<view v-if="item.id == 25" class="delivery">快递发货</view>
										<view v-if="item.id != 25" class="dis">{{item.peoNo || ''}}</view>
										<!-- <view class="dis">{{item.peoNo || ''}}</view> -->
									</view>
									<uni-row style="display: flex;">
										<uni-col :span="16">
											<view class="point tip">
												<view v-for="(ele,ind) in item.storeSummary" :key="index">
													<uni-tag style="margin-right:20rpx;" :inverted="true" :text="ele" size="mini" type="warning" />
													<text>{{item.point || ''}}</text>
												</view>
											</view>
										</uni-col>
										<uni-col :span="8" >
											<view v-if="index==0 && item.id != 25" class="point geoname">离你最近</view>
											<view v-if="item.id == 25" class="point delivery">预计1~3日送达</view>
										</uni-col>
									</uni-row>
									<!-- 									<uni-row style="display: flex;">
										<uni-col :span="16">
											<view><uni-tag :inverted="true" text="测试1" size="mini" type="warning" /></view>
										</uni-col>
										<uni-col :span="8">
											<view>测试2</view>
										</uni-col>
									</uni-row> -->
									<!-- 									<view class="point">
										<view class="tip" v-for="(ele,ind) in item.storeSummary" :key="index">
											<uni-tag :inverted="true" :text="ele" size="mini" type="warning" />
											<text>{{item.point || ''}}</text>
										</view>
										<view v-if="index==0 && item.id != 25">离你最近</view>
										<view v-if="item.id == 25" class="delivery">预计1~3日送达</view>
									</view> -->
									<view class="address">{{item.initPlace}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if="goodScroll">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
					</view>
					<view class="mores-txt flex" v-if="!goodScroll">
						<text>我是有底线的</text>
					</view>
				</view>
				<!-- 登录 -->
				<!-- <view class="index-login flex-a flex-b" v-if="!isLogin">
					<text>登录有机会领取红包哦</text>
					<button type="default" open-type="getUserInfo" class="user-btn flex-a"
						@getuserinfo='getUserInfo'><uni-icons type="gift-filled" size="15"
							color="#ffffff"></uni-icons><text>马上领</text></button>
				</view> -->
			</view>
		</view>
		<block v-if="isPhoneBox">
			<routinePhone :logoUrl="logoUrl" :isPhoneBox="isPhoneBox" @close="bindPhoneClose" :authKey="authKey">
			</routinePhone>
		</block>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="coupon flex-b" v-for="item in couponList" :key="item.id">
				<view class="flex-a">
					<view class="left">
						<view>￥{{ item.lessPrice }}</view>
						<view></view>
					</view>
					<view class="middle">
						<view class="flex-a"><text>{{ item.name }}</text>
						</view>
						<view>{{ item.endDate || '长期有效' }}</view>
					</view>
				</view>
				<view class="right">
					<view @click="receive(item)">立即领取</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Auth from '@/libs/wechat';
	import Cache from '../../utils/cache';
	import {
		toLogin
	} from './../../libs/login';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	var topHeight = statusBarHeight + 40
	let app = getApp();
	import routinePhone from '@/components/login_mobile/routine_phone.vue'
	import Routine from '@/libs/routine';
	import {
		getIndexData,
		getCoupons,
		setCouponReceive,
		getCollectStore,
		reviceCoupon
	} from '@/api/api.js';
	// #ifdef MP-WEIXIN
	import {
		getTemlIds
	} from '@/api/api.js';
	// import {
	// 	SUBSCRIBE_MESSAGE,
	// 	TIPS_KEY
	// } from '@/config/cache';
	// #endif
	// #ifdef H5  
	import {
		follow
	} from '@/api/public.js';
	// #endif
	import {
		getShare
	} from '@/api/public.js';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import {
		getCategoryList,
		getProductslist,
		getProductHot,
		getGroomList,
		getLocation
	} from '@/api/store.js';
	import {
		silenceBindingSpread
	} from '@/utils';
	// #ifndef MP
	import {
		kefuConfig
	} from "@/api/public";
	import {
		getWechatConfig
	} from "@/api/public";
	// #endif
	import Loading from '@/components/Loading/index.vue';
	import {
		getStoreBasic
	} from '../../api/index.js'
	const arrTemp = ["beforePay", "afterPay", "refundApply", "beforeRecharge", "createBargain", "pink"];
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			Loading,
			routinePhone
		},
		data() {
			return {
				title: '贝安云店',
				isPhoneBox: false,
				longitude: 0,
				latitude: 0,
				address: '',
				loaded: false,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				statusBarHeight: statusBarHeight,
				topHeight: topHeight,
				navIndex: 0,
				navTop: [],
				followUrl: "",
				followHid: true,
				followCode: false,
				logoUrl: "",
				imgUrls: [{
						pic: 'https://cxj.szzkba.cn/upload/i/2024/03/20/170829.jpg'
					},
					{
						pic: 'https://cxj.szzkba.cn/upload/i/2024/03/20/170829_1.jpg'
					},
					{
						pic: 'https://cxj.szzkba.cn/upload/i/2024/03/20/170831.png'
					}
				],
				stores: [],
				business: [],
				page: 1,
				limit: 20,
				totalPage: 1,
				itemNew: [],
				menus: [
					// {
					// 	pic:'/static/pic/sys1.png',
					// 	url:'',
					// 	name:'全部'
					// },
				],
				bastInfo: '',
				fastInfo: '',
				fastList: [],
				firstInfo: '',
				salesInfo: '',
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				liveList: [],
				hotList: [{
					pic: '/static/images/hot_001.png'
				}, {
					pic: '/static/images/hot_002.png'
				}, {
					pic: '/static/images/hot_003.png'
				}],
				ProductNavindex: 0,
				marTop: 0,
				childID: 0,
				loadend: false,
				loadTitle: '加载更多',
				sortProduct: [],
				where: {
					cid: 0,
					page: 1,
					limit: 10,
				},
				is_switch: true,
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
				explosiveMoney: [],
				prodeuctTop: 0,
				searchH: 0,
				isFixed: false,
				goodType: 0, //精品推荐Type
				goodScroll: true, //精品推荐开关
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				tempArr: [{
						des: '',
						price: 12.9,
						old: 13.9,
						img: './../../static/pic/food2.jpg'
					},
					{
						des: '',
						price: 32.9,
						old: 33.9,
						img: './../../static/pic/food2.jpg'
					},
					{
						des: '',
						price: 52.9,
						old: 15.9,
						img: './../../static/pic/food2.jpg'
					}
				], //精品推荐临时数组
				roll: [], // 新闻简报
				site_name: '', //首页title
				iSshowH: false,
				configApi: {}, //分享类容配置
				spikeList: [], // 秒杀
				point: '',
				privacyStatus: false, // 隐私政策是否同意过
				tabsScrollLeft: 0, // tabs当前偏移量
				scrollLeft: 0,
				lineColor: 'red',
				lineStyle: {}, // 下划线位置--动态甲酸
				listActive: 0, // 当前选中项
				duration: 0.2, // 下划线动画时长
				couponList: []
			}
		},
		watch: {
			ProductNavindex(newVal) { // 监听当前选中项
				this.setTabList()
			},
			listActive(newVal) { // 监听当前选中项
				this.setTabList()
			}
		},
		mounted() {
			this.setTabList()
		},
		onLoad() {
			var that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.$store.commit("SYSTEM_PLATFORM", res.platform);
				}
			});
			let self = this
			// #ifdef MP
			// 获取小程序头部高度
			this.navH = app.globalData.navHeight;
			let info = uni.createSelectorQuery().select(".mp-header");
			info.boundingClientRect(function(data) {
				// self.marTop = data.height
				// self.poTop = Number(data.height) + 84
			}).exec()
			// #endif
			// #ifndef MP
			this.navH = 0;
			// #endif
			this.isLogin && silenceBindingSpread();
			this.getIndexConfig();
			// #ifdef MP
			this.getTemlIds()
			// #endif
		},
		onLoad(){
			this.business=[]
			this.getAddress()
		},
		onShow() {
			let self = this
			self.isPhoneBox = false
			uni.setNavigationBarTitle({
				title: self.site_name
			})
			self.getAddress()
			//常用服务
			self.getCollectStore()
			// if(uni.getStorageSync('address')){
			// 	self.address=uni.getStorageSync('address')
			// }
			// self.getcouponList();
		},
		methods: {
			//获取附近商家
			getStoreList() {
				getStoreBasic({
					lat: this.latitude,
					lng: this.longitude,
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 200) {
						let list = res.rows,
							tempTip = [];
						list.sort((a, b) => {
							return parseFloat(a.peoNo) - parseFloat(b.peoNo) // 升序
						})
						list.forEach(item => {
							// console.log(item)
							var peo = Number(item.peoNo)
							if (peo > 1000) {
								peo = '< ' + ((peo + 100) / 1000).toFixed(1) + ' km'
							} else {
								peo = peo.toFixed(1) + ' m'
							}
							item.peoNo = peo
							if (!item.storeSummary) {
								item.storeSummary = '优选店铺,好评100%'
							}
							let n = item.storeSummary.indexOf(',')
							if (n == -1) {
								tempTip.push(item.storeSummary)
							} else {
								tempTip = item.storeSummary.split(',')
							}
							item.storeSummary = tempTip
						})
						this.business = this.page == 1 ? list : this.business.concat(list)
						this.totalPage = res.total / this.limit
					}
				})
			},
			receive(item) {
				reviceCoupon({
					no: item.no,
					storeNo: item.storeNo,
					lessPrice: item.lessPrice,
				}).then(res => {
					if (res.code == 200) {
						this.$util.Tips({
							title: '领取成功'
						});
						// this.getcouponList()
					}
				})
			},
			//登录
			toLogin() {
				toLogin();
			},
			//常用服务
			getCollectStore() {
				getCollectStore().then(res => {
					if (res.code == 200) {
						this.stores = res.data
					}
				})
			},
			//立即登录
			getUserInfo() {
				let self = this;
				uni.showLoading({
					title: '正在登录中'
				});
				uni.login({
					provider: 'weixin',
					success(res) {
						uni.hideLoading();
						// if (res.code) Cache.set(STATE_R_KEY, res.code, 10800);
						uni.showModal({
							title: '温馨提示',
							content: '亲，授权微信登录后才能正常使用小程序功能',
							success: function(res) {
								uni.getUserProfile({
									lang: 'zh_CN',
									desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
									success(user) {
										if (res.code) user.code = res.code;
										uni.login({
											provider: 'weixin',
											success(news) {
												// if (news.code) Cache.set(STATE_R_KEY,
												// 	news.code, 10800);
												self.getWxUser(news.code, user);
											},
										})
									},
								})
							},
						})
					},
				})
			},
			getWxUser(code, res) {
				let self = this
				let userInfo = res.userInfo;
				userInfo.code = code;
				userInfo.spread_spid = app.globalData.spid; //获取推广人ID
				userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
				userInfo.avatar = userInfo.avatarUrl;
				userInfo.city = userInfo.city;
				userInfo.country = userInfo.country;
				userInfo.nickName = userInfo.nickName;
				userInfo.province = userInfo.province;
				userInfo.sex = userInfo.gender;
				userInfo.type = 'routine'
				Routine.authUserInfo(userInfo.code, userInfo) //小程序登录-调登录接口
					.then(res => {
						// self.authKey = res.key;
						if (res.type === 'register') {
							uni.hideLoading();
							self.isPhoneBox = true
						}
						if (res.type === 'login') {
							uni.hideLoading();
							self.$store.commit('LOGIN', {
								token: res.token
							});
							self.$store.commit("SETUID", res.uid);
							// self.getUserInfo();
							let pages = getCurrentPages();
							self.$util.Tips({
								title: res,
								icon: 'success'
							}, {
								tab: 3,
								url: pages.length == 3 ? 2 : ''
							})
						}
					})
					.catch(res => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						});
					});

			},
			//店铺首页
			toStore(item) {
				uni.navigateTo({
					url: `/pages/store/index?storeNo=${item.storeNo}`
				})
			},
			// scroll-view滑动事件
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
			setTabList() {
				this.$nextTick(() => {
					this.scrollIntoView()
				})
			},
			// 计算tabs位置
			scrollIntoView() { // item滚动
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0]
					this.getElementData(`#tab_item`, (data) => {
						let el = data[this.listActive]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			// #ifdef MP
			getTemlIds() {
				for (var i in arrTemp) {
					this.getTem(arrTemp[i]);
				}
			},
			getTem(data) {
				getTemlIds({
					type: data
				}).then(res => {
					if (res.data) {
						let arr = res.data.map((item) => {
							return item.tempId
						})
						wx.setStorageSync('tempID' + data, arr);
					}
				})
			},
			// #endif
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					uni.setNavigationBarTitle({
						title: '首页'
					})
					that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "site_name", '首页');
					// that.$set(that, "imgUrls", res.data.banner);
					// that.$set(that, "menus", res.data.menus);
					that.$set(that, "roll", res.data.roll ? res.data.roll : []);
					// #ifdef H5
					that.$store.commit("SET_CHATURL", res.data.yzfUrl);
					Cache.set('chatUrl', res.data.yzfUrl);
					// #endif
					that.$set(that, "explosiveMoney", res.data.explosiveMoney);
					that.goodType = res.data.explosiveMoney[0].type
					this.getGroomList();
					this.shareApi();
					// this.getcouponList();
				})
			},
			getcouponList() {
				let that = this;
				getCoupons({
					page: 1,
					limit: 6
				}).then(res => {
					that.$set(that, "couponList", res.data);
					if (res.data.length == 0) {
						that.$refs.popup.close()
					} else {
						that.$refs.popup.open()
					}
					// 小程序判断用户是否授权；
					// #ifdef MP
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								that.window = that.couponList.length ? true : false;
							} else {
								that.window = false;
								that.iShidden = true;
							}
						}
					});
					// #endif
					// #ifndef MP
					if (that.isLogin) {
						that.window = false;
					} else {
						that.window = res.data.length ? true : false;
					}
					// #endif
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			shareApi: function() {
				getShare().then(res => {
					this.$set(this, 'configApi', res.data);
					// #ifdef H5
					this.setOpenShare(res.data);
					// #endif
				})
			},
			// 微信分享；
			setOpenShare: function(data) {
				let that = this;
				if (that.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: location.href,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
						configAppMessage);
				}
			},
			// 首发新品详情
			goDetail(item) {
				if (item.activityH5 && item.activityH5.type === "2" && !this.isLogin) {
					toLogin();
				} else {
					goShopDetail(item, this.uid).then(res => {
						uni.navigateTo({
							url: `/pages/goods_details/index?id=${item.id}`
						})
					})
				}
			},
			//获取我的定位
			getAddress() {
				let that = this
				uni.startLocationUpdate({
					success: res => console.log(),
					fail: err => console.error('开启小程序接收位置消息失败：', err),
					complete: msg => console.log()
				});
				uni.onLocationChange(function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.$nextTick(() => {
						getLocation({
							lat: res.latitude,
							lng: res.longitude
						}).then(res => {
							if (res.code == 200) {
								that.address = res.msg
								uni.setStorageSync('address', res.msg);
							}
						})
						that.getStoreList()
					})
				});
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	altitude: true,
				// 	geocode: true,
				// 	success: function(res) {
				// 		that.latitude = res.latitude
				// 		that.longitude = res.longitude
				// 		that.$nextTick(() => {
				// 			getLocation({
				// 				lat: res.latitude,
				// 				lng: res.longitude
				// 			}).then(res => {
				// 				if(res.code==200){
				// 					that.address = res.msg
				// 					uni.setStorageSync('address', res.msg);
				// 				}  
				// 			})
				// 			that.getStoreList()
				// 		})
				// 	},
				// 	fail: function(err) {
				// 	}
				// });
			},
			// 精品推荐
			getGroomList(onloadH) {
				this.loading = true
				let type = this.goodType;
				if (!this.goodScroll) return
				if (onloadH) {
					this.iSshowH = true
				}
				getGroomList(type, this.params).then(({
					data
				}) => {
					this.iSshowH = false
					this.loading = false
					this.goodScroll = data.list.length >= this.params.limit
					this.params.page++
					// this.tempArr = this.tempArr.concat(data.list)
				})
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				that.loading = true;

				if (that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.list.length < that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data.list)
				});
			},
		},
		mounted() {
			let self = this
			// #ifdef H5
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.configApi.title,
				imageUrl: this.configApi.img,
				desc: this.configApi.synopsis,
				path: '/pages/index/index'
			};
		},
		// #endif
		onReachBottom() {
			console.log("上拉触底")
			// console.log(this.page + "------" + this.totalPage)
			// if (this.page < this.totalPage) {
			// 	this.page = this.page + 1
			// 	this.getStoreList()
			// } else{
			// 	console.log("无更多数据")
			// }
			this.page = this.page + 1
			this.getStoreList()
		},
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */

	}
</style>
<style lang="scss">
	.notice {
		width: 100%;
		height: 70rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 25rpx;
		line-height: 70rpx;
		padding: 0 14rpx;

		.line {
			color: #CCCCCC;
		}

		.pic {
			width: 130rpx;
			height: 36rpx;

			image {
				width: 100%;
				height: 100%;
				display: block !important;
			}
		}

		.swipers {
			height: 100%;
			width: 444rpx;
			overflow: hidden;

			swiper {
				height: 100%;
				width: 100%;
				overflow: hidden;
				font-size: 22rpx;
				color: #333333;
			}
		}

		.iconfont {
			color: #999999;
			font-size: 20rpx;
		}
	}

	.couponIndex {
		width: auto;
		height: 238rpx;
		background-image: url('~@/static/images/yhjsy.png');
		background-size: 100% 100%;
		padding-left: 42rpx;
		margin-bottom: 30rpx;

		.titBox {
			padding: 47rpx 0;
			text-align: center;
			height: 100%;

			.tit1 {
				color: #FFEBD2;
				font-size: 34rpx;
				font-weight: 600;
			}

			.tit2 {
				color: #FFEBD2;
				font-size: 22rpx;
				margin: 10rpx 0 26rpx 0;
			}

			.tit3 {
				color: #FFDAAF;
				font-size: 24rpx;

				.iconfont {
					font-size: 20rpx;
				}
			}
		}

		.listBox {
			padding: 14rpx 0;

			.listActive {
				background-image: url('~@/static/images/lingyhj.png');
				background-size: 100% 100%;
			}

			.listHui {
				background-image: url('~@/static/images/weiling.png');
				background-size: 100% 100%;
			}

			.list {
				width: 170rpx;
				height: 210rpx;
				padding: 16rpx 0;
				text-align: center;
				margin-left: 24rpx;

				.tit {
					font-size: 18rpx;
					padding: 0 26rpx;
				}

				.titActive {
					color: #C99959;
				}

				.price {
					font-size: 46rpx;
					font-weight: 900;
					margin-top: 4rpx;
				}

				.pricehui {
					color: #B2B2B2;
				}

				.fonthui {
					background-color: #F5F5F5 !important;
				}

				.yuan {
					font-size: 24rpx;
				}

				.ling {
					font-size: 24rpx;
					margin-top: 9.5rpx;
					width: 102rpx;
					height: 36rpx;
					line-height: 36rpx;
					background-color: #FFE5C7;
					border-radius: 28rpx;
					margin: auto;
				}

				.priceM {
					color: #FFDAAF;
					font-size: 22rpx;
					margin-top: 14rpx;
				}
			}
		}
	}

	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		/* #ifdef H5*/
		top: var(--window-top);
		/* #endif */

		z-index: 99;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
		padding: 30rpx 0;
	}

	.listAll {
		width: 20%;
		text-indent: 62rpx;
		font-size: 30rpx;
		border-left: 1px #eee solid;
		margin: 1% 0;
		padding: 5rpx;
		position: relative;

		image {
			position: absolute;
			left: 20rpx;
			top: 8rpx;
		}
	}

	.tab {
		position: relative;
		display: flex;
		font-size: 28rpx;
		white-space: nowrap;

		&__item {
			flex: 1;
			padding: 0 20rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;

			&.active {
				color: #09C2C9;
			}
		}
	}

	.tab__line {
		display: block;
		height: 6rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 3rpx;
		position: relative;
		background: #2FC6CD;
	}

	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}


	.privacy-wrapper {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #7F7F7F;

		.privacy-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			padding: 50rpx 45rpx 0;
			background: #fff;
			border-radius: 20rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #333;
				font-weight: 700;
			}

			.content {
				margin-top: 20rpx;
				line-height: 1.5;
				font-size: 26rpx;
				color: #666;
				text-indent: 54rpx;

				i {
					font-style: normal;
					color: $theme-color;
				}
			}

			.btn-box {
				margin-top: 40rpx;
				text-align: center;
				font-size: 30rpx;

				.btn-item {
					height: 82rpx;
					line-height: 82rpx;
					background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
					color: #fff;
					border-radius: 41rpx;
				}

				.btn {
					padding: 30rpx 0;
				}
			}
		}
	}

	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;

		.header {
			width: 100%;
			background-color: $theme-color;
			padding: 28rpx 30rpx;

			.serch-wrapper {
				align-items: center;

				.input {
					display: flex;
					align-items: center;
					width: 546rpx;
					height: 58rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 26rpx;

					.iconfont {
						margin-right: 20rpx;
						font-size: 26rpx;
						color: #666666;
					}
				}
			}
		}

		/* #ifdef MP */
		.serch-box {
			padding: 30rpx 20rpx 10rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			z-index: 99;
			background: #fff;

			.input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				/* #ifdef MP */
				width: 100%;
				/* #endif */
				box-sizing: border-box;
				height: 55rpx;
				padding: 0 10rpx 0 30rpx;
				// background: rgba(247, 247, 247, 1);
				border: 1px solid #7FA8EC;
				border-radius: 25rpx;
				color: #BBBBBB;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}

		.serch-box.hidden {
			z-index: -20;
		}

		.serch-wrapper {
			height: 100%;
			align-items: center;
			// padding: 0 20rpx 0 10rpx;
			// border-radius: 0 0 20rpx 20rpx;
			// box-shadow: 0 10rpx 30rpx #ddd;

			.address {
				width: 350rpx;
				font-size: 24rpx;

				text {
					display: inline-block;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.tip {
				font-size: 22rpx;
				color: #999;
			}

		}

		.star {
			margin-top: 15rpx;
			padding: 0 40rpx;

			.item {
				display: inline-block;
				width: 25%;
				text-align: center;

				.pictrue {
					image {
						width: 100rpx;
						height: 100rpx !important;
						border-radius: 50%;
						background: #ccc;
					}
				}

				.name {}
			}
		}

		/* #endif */

		.page_content {
			margin-top: 10rpx;
			/* #ifdef H5 */
			// margin-top: 20rpx !important;
			/* #endif */

			.swiper {
				position: relative;
				width: 100%;
				height: 280rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow: hidden;
				/* #ifdef MP */
				z-index: 10;

				/* #endif */
				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
				}
			}

			.swiper.hidden {
				z-index: -20;
			}

			.tab-nav {
				margin: 30rpx 0 30rpx;
				padding-left: 30rpx;
				color: #333;
				font-size: 32rpx;

				.active {
					padding-bottom: 10rpx;
					font-weight: bold;
					border-bottom: 4rpx solid #FF7D89;
				}
			}

			.index-product-wrapper {
				&.on {
					min-height: 1500rpx;
				}

				.list-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 335rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 330rpx;
						}

						.text-info {
							padding: 10rpx 20rpx 15rpx;

							.title {
								color: #222222;
							}

							.old-price {
								margin-top: 8rpx;
								font-size: 26rpx;
								color: #AAAAAA;
								text-decoration: line-through;

								text {
									margin-right: 2px;
									font-size: 20rpx;
								}
							}

							.price {
								display: flex;
								align-items: flex-end;
								color: $theme-color;
								font-size: 34rpx;
								font-weight: 800;

								text {
									padding-bottom: 4rpx;
									font-size: 24rpx;
									font-weight: 800;
								}

								.txt {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									margin-left: 15rpx;
									margin-bottom: 10rpx;
									border: 1px solid $theme-color;
									border-radius: 4rpx;
									font-size: 22rpx;
									font-weight: normal;
								}
							}
						}
					}

					&.on {
						display: flex;
					}
				}

				.nearby-store {
					padding: 0 30rpx;
					width: 100%;
					box-sizing: border-box;

					.buiness {
						margin-bottom: 15rpx;
						border-bottom: 2rpx solid #F5F5F5;
						padding-bottom: 15rpx;
						box-sizing: border-box;
						height: 200rpx;
						overflow: hidden;

						.left {
							width: 22%;
							height: 200rpx;
							overflow: hidden;

							image {
								width: 250rpx;
								border-radius: 20rpx;
							}
						}

						.right {
							width: 77%;

							.title {
								color: #6E6E6E;

								.name {
									font-size: 30rpx;
									font-weight: bold;
								}

								.dis {
									font-size: 20rpx;
								}

								.delivery {
									font-size: 20rpx;
									color: lightgreen;
								}
							}

							.point {
								margin: 20rpx 0;
								font-size: 24rpx;
								display: flex;
								flex-direction: row;

								view {
									color: #7795F5;
								}

								text {
									color: #FF9100;
									font-size: 26rpx;
								}

								&.tip {
									// justify-content: left;
									margin-right: 20rpx;
								}

								&.delivery {
									margin-left: 45rpx;
									font-size: 20rpx;
									color: darkgray;
									white-space: nowrap;
								}

								&.geoname {
									font-size: 20rpx;
									color: #7795F5;
									margin-left:55%;
									white-space: nowrap;
								}
								// .uni-tag{
								// 	margin-right: 10rpx;
								// }
								// &.flex-point{
								// 	    display: flex;
								// 	    flex-direction: row;
								// 	    // justify-content: space-between;
								// 		margin-right: 20rpx;
								// }
							}

							.address {
								font-size: 24rpx;
								color: #929292;
								text-align: justify;
							}
						}
					}
				}
			}
		}
	}

	.productList {
		/* #ifdef H5 */
		padding-bottom: 140rpx;
		/* #endif */
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.nav {
		padding: 20px 20px 0 20px;
		box-sizing: border-box;

		.item {
			display: inline-block;
			width: 20%;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 20px;

			.menu-txt {}
		}

		.pictrue {
			position: relative;

			image {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, red 50%, #ff5400 100%);

	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
		text-align: center;
	}

	.index-login {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.3);
		padding: 20rpx;
		height: 80rpx;
		color: #fff;
		font-size: 24rpx;

		.user-btn {
			background: transparent;
			background: $theme-color;
			border-radius: 20rpx;
			padding: 6rpx 20rpx;
			font-size: 20rpx;
			color: #fff;
		}

		view {
			background: $theme-color;
			border-radius: 20rpx;
			padding: 6rpx 20rpx;
			font-size: 20rpx;
		}
	}

	.uni-popup__wrapper {
		width: 80% !important;
	}

	.coupon {
		margin: 40rpx auto;
		background: #FF6E30;
		box-shadow: 0 0 20rpx 20rpx #F9F9F9;
		border-radius: 20rpx;
		width: 90%;
		padding: 20rpx 0 20rpx 30rpx;
		box-sizing: border-box;
		color: #fff;

		.left {
			margin-right: 20rpx;

			view:first-child {
				font-size: 36rpx;
			}

			view:last-child {
				font-size: 24rpx;
			}
		}

		.middle {
			width: 250rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			view:first-child {
				font-weight: bold;
				font-size: 24rpx;
			}

			view:last-child {
				font-size: 24rpx;
			}
		}

		.right {
			width: 30%;
			border-left: 1rpx dashed #EAEAEA;
			position: relative;

			view {
				display: inline-block;
				border-radius: 30rpx;
				padding: 6rpx 15rpx;
				border: 1rpx solid #fff;
				font-size: 22rpx;
				color: #FB452E;
				background: #fff;
				white-space: nowrap;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 999999;
			}

			img {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				right: 30rpx;
				bottom: 0;
				transform: rotate(-10deg);
			}
		}
	}
</style>